<template>
  <div class="by-box">
    <el-row>
      <el-col :span="8">
        <el-button type="primary" size="small" :loading="false">发运</el-button>
        <el-button type="primary" size="small" :loading="true">取消订单</el-button>
        <el-button type="primary" size="small" icon="el-icon-share">发运管理</el-button>
      </el-col>
      <el-col :span="4"><span class="by-null">'</span></el-col>
      <el-col :span="4"><span class="by-null">'</span></el-col>
      <el-col :span="8" class="by-right">
        <el-autocomplete
          class="inline-input"
          v-model="state1"
          size="small"
          :fetch-suggestions="querySearch"
          placeholder="请输入客户名称"
          @select="handleSelect"
          style="position: relative;right: 4px;top:2px"
        ></el-autocomplete>
        <el-button type="primary" size="small" icon="el-icon-search" @click="toggleSearch">更多</el-button>
        <el-button type="primary" size="small" :loading="true">刷新</el-button>
      </el-col>
      <!--<el-col :span="0" class="by-right">-->
        <!---->
      <!--</el-col>-->
    </el-row>
    <el-row>
      <div class="by-search-box" :class="{'height200':searchFlag}">
        <el-form :inline="true" style="margin: 4px 0 0 0">
          <el-form-item label="客户名称">
            <el-autocomplete
              class="inline-input"
              v-model="state1"
              size="small"
              :fetch-suggestions="querySearch"
              placeholder="客户名称"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="货运部名称">
            <el-autocomplete
              class="inline-input"
              v-model="state1"
              size="small"
              :fetch-suggestions="querySearch"
              placeholder="货运部名称"
              @select="handleSelect"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="data"  placeholder="订单状态" size="small">
              <!--'NEW', 'DELIVERED', 'CANCEL'-->
              <el-option label="新建" value="NEW"></el-option>
              <el-option label="已发运" value="DELIVERED"></el-option>
              <el-option label="已取消" value="CANCEL"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型">
            <el-select v-model="data"  placeholder="订单类型" size="small">
              <!--'SEND', 'RETAIL', 'MERCHANT', 'DISTRIBUTOR'-->
              <el-option label="送货" value="SEND"></el-option>
              <el-option label="零售" value="RETAIL"></el-option>
              <el-option label="经销商" value="MERCHANT"></el-option>
              <el-option label="发货" value="DISTRIBUTOR"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付情况">
            <el-select v-model="data"  placeholder="支付情况" size="small">
              <!--'SEND', 'RETAIL', 'MERCHANT', 'DISTRIBUTOR'-->
              <el-option label="已付清" value="PAYOFF"></el-option>
              <el-option label="未付清" value="UNPAID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间" style="width: 530px">
            <el-col :span="10">
              <el-date-picker type="date" placeholder="起始日期"  style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="4" style="text-align: center">---</el-col>
            <el-col :span="10">
              <el-time-picker type="date" placeholder="结尾日期" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="送往目的地">
            <el-cascader
              :options="options"
              change-on-select
              placeholder="目的地"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <el-row style="margin:0 0 4px 0">
          <el-col :span="20"><span class="by-null">"</span></el-col>
          <el-col :span="4" class="by-right">
            <el-button type="primary" size="small">查询</el-button>
            <el-button type="primary" size="small">重置</el-button>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <div style="height: 220px">
      <el-table
        id="by-order-table"
        border
        resizable
        ref="multipleTable"
        :data="tableList"
        tooltip-effect="dark"
        style="width: 100%;display: block"
        height="220"
        @row-click= 'rowClick'
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" @selectClick.stop="byNull" width="34"></el-table-column>
        <el-table-column prop="orderId" label="系统订单号" width="108"></el-table-column>
        <el-table-column prop="customerName" label="客户姓名" width="80"></el-table-column>
        <el-table-column prop="customerPhone" label="客户电话" width="108"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 6px">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column prop="orderStatus" :formatter="getOrderStatus" label="订单状态"  width="80"></el-table-column>-->
        <el-table-column label="订单状态" width="80">
          <template slot-scope="scope">
            <i class="el-icon-error" style="color: #F56C6C" v-if="scope.row.orderStatus === 'CANCEL'"></i>
            {{scope.row.orderStatus | getOrderStatus }}
          </template>
        </el-table-column>
        <!--<el-table-column prop="orderType|getOrderStatus" label="订单类型"  width="80"></el-table-column>-->
        <el-table-column label="订单类型" width="80">
          <template slot-scope="scope">
            {{scope.row.orderType | getOrderType }}
          </template>
        </el-table-column>
        <el-table-column label="押金(元)" width="80">
          <!-- byCurrency -->
          <template slot-scope="scope">
            {{scope.row.deposit | byCurrency }}
          </template>
        </el-table-column>
        <el-table-column label="订单总额(元)" width="80">
          <!-- byCurrency -->
          <template slot-scope="scope">
            {{scope.row.totalMoney | byCurrency }}
          </template>
        </el-table-column>
        <el-table-column label="实际支付(元)" width="80">
          <!-- byCurrency -->
          <template slot-scope="scope">
            {{scope.row.actualMoney | byCurrency }}
          </template>
        </el-table-column>
        <el-table-column label="支付状态" width="80">
          <template slot-scope="scope">
            <i class="el-icon-success" style="color: #67C23A" v-if="scope.row.paymentStatus === 'PAYOFF'"></i>
            <i class="el-icon-warning" style="color: #E6A23C" v-else></i>
            {{scope.row.paymentStatus | getPaymentStatus }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" width="160"></el-table-column>
        <el-table-column prop="deliverGoodsTime" label="要求发运时间" width="160">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 6px">{{ scope.row.deliverGoodsTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="freight" label="货运部" width="120"></el-table-column>
        <el-table-column prop="freightPhone" label="货运部电话" width="120"></el-table-column>
        <el-table-column prop="freightAddress" label="货运部地址" width="300"></el-table-column>
        <el-table-column fixed="right" label="操作" width="170">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleDelete(scope.$index, scope.row)">查看详情</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">发运</el-button>
          </template>
        </el-table-column>
        <!--<el-table-column label="日期" width="120">-->
        <!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column prop="name" label="姓名" width="120"></el-table-column>-->
        <!--<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>-->
      </el-table>
    </div>
    <div class="by-page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
    <div class="by-order-card">
      <el-row class="by-flex">
        <el-col>123</el-col>
        <el-col>123</el-col>
        <el-col>123</el-col>
      </el-row>
    </div>
  </div>
</template>

<script type="text/javascript">
  import { getList } from '@/api/order/index'
  export default {
    name: 'order',
    data() {
      return {
        data: '',
        searchFlag: '',
        currentPage4: 1,
        restaurants: [],
        state1: '',
        tableList: [],
        options: [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
            children: [{
              value: 'layout',
              label: 'Layout 布局'
            }, {
              value: 'color',
              label: 'Color 色彩'
            }, {
              value: 'typography',
              label: 'Typography 字体'
            }, {
              value: 'icon',
              label: 'Icon 图标'
            }, {
              value: 'button',
              label: 'Button 按钮'
            }]
          }, {
            value: 'form',
            label: 'Form',
            children: [{
              value: 'radio',
              label: 'Radio 单选框'
            }, {
              value: 'checkbox',
              label: 'Checkbox 多选框'
            }, {
              value: 'input',
              label: 'Input 输入框'
            }, {
              value: 'input-number',
              label: 'InputNumber 计数器'
            }, {
              value: 'select',
              label: 'Select 选择器'
            }, {
              value: 'cascader',
              label: 'Cascader 级联选择器'
            }, {
              value: 'switch',
              label: 'Switch 开关'
            }, {
              value: 'slider',
              label: 'Slider 滑块'
            }, {
              value: 'time-picker',
              label: 'TimePicker 时间选择器'
            }, {
              value: 'date-picker',
              label: 'DatePicker 日期选择器'
            }, {
              value: 'datetime-picker',
              label: 'DateTimePicker 日期时间选择器'
            }, {
              value: 'upload',
              label: 'Upload 上传'
            }, {
              value: 'rate',
              label: 'Rate 评分'
            }, {
              value: 'form',
              label: 'Form 表单'
            }]
          }, {
            value: 'data',
            label: 'Data',
            children: [{
              value: 'table',
              label: 'Table 表格'
            }, {
              value: 'tag',
              label: 'Tag 标签'
            }, {
              value: 'progress',
              label: 'Progress 进度条'
            }, {
              value: 'tree',
              label: 'Tree 树形控件'
            }, {
              value: 'pagination',
              label: 'Pagination 分页'
            }, {
              value: 'badge',
              label: 'Badge 标记'
            }]
          }, {
            value: 'notice',
            label: 'Notice',
            children: [{
              value: 'alert',
              label: 'Alert 警告'
            }, {
              value: 'loading',
              label: 'Loading 加载'
            }, {
              value: 'message',
              label: 'Message 消息提示'
            }, {
              value: 'message-box',
              label: 'MessageBox 弹框'
            }, {
              value: 'notification',
              label: 'Notification 通知'
            }]
          }, {
            value: 'navigation',
            label: 'Navigation',
            children: [{
              value: 'menu',
              label: 'NavMenu 导航菜单'
            }, {
              value: 'tabs',
              label: 'Tabs 标签页'
            }, {
              value: 'breadcrumb',
              label: 'Breadcrumb 面包屑'
            }, {
              value: 'dropdown',
              label: 'Dropdown 下拉菜单'
            }, {
              value: 'steps',
              label: 'Steps 步骤条'
            }]
          }, {
            value: 'others',
            label: 'Others',
            children: [{
              value: 'dialog',
              label: 'Dialog 对话框'
            }, {
              value: 'tooltip',
              label: 'Tooltip 文字提示'
            }, {
              value: 'popover',
              label: 'Popover 弹出框'
            }, {
              value: 'card',
              label: 'Card 卡片'
            }, {
              value: 'carousel',
              label: 'Carousel 走马灯'
            }, {
              value: 'collapse',
              label: 'Collapse 折叠面板'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
      }
    },
    methods: {
      byNull() {},
      toggleSearch() {
        this.searchFlag = !this.searchFlag
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      rowClick(row, event, column) {
        // row.forEach(row => {
        // this.$refs.multipleTable.toggleRowSelection(row)
        // })
        const temp = ['INPUT', 'SPAN', 'BUTTON']
        if (temp.indexOf(event.srcElement.nodeName) === -1 || !event.srcElement.className) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(row)
        } else {
          event.stopPropagation()
        }
        console.log('srcElement', event.srcElement.nodeName)
        console.log('rowClick-row', row)
        console.log('rowClick-event', event)
        console.log('rowClick-column', column)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
      },
      handleEdit(index, row) {
        console.log(index, row)
      },
      handleDelete(index, row) {
        console.log(index, row)
      },
      loadAll() {
        return [
          { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
          { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
          { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
          { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
          { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
          { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
          { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' },
          { 'value': '茶芝兰（奶茶，手抓饼）', 'address': '上海市普陀区同普路1435号' },
          { 'value': '十二泷町', 'address': '上海市北翟路1444弄81号B幢-107' },
          { 'value': '星移浓缩咖啡', 'address': '上海市嘉定区新郁路817号' },
          { 'value': '阿姨奶茶/豪大大', 'address': '嘉定区曹安路1611号' },
          { 'value': '新麦甜四季甜品炸鸡', 'address': '嘉定区曹安公路2383弄55号' },
          { 'value': 'Monica摩托主题咖啡店', 'address': '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
          { 'value': '浮生若茶（凌空soho店）', 'address': '上海长宁区金钟路968号9号楼地下一层' },
          { 'value': 'NONO JUICE  鲜榨果汁', 'address': '上海市长宁区天山西路119号' },
          { 'value': 'CoCo都可(北新泾店）', 'address': '上海市长宁区仙霞西路' },
          { 'value': '快乐柠檬（神州智慧店）', 'address': '上海市长宁区天山西路567号1层R117号店铺' },
          { 'value': 'Merci Paul cafe', 'address': '上海市普陀区光复西路丹巴路28弄6号楼819' },
          { 'value': '猫山王（西郊百联店）', 'address': '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
          { 'value': '枪会山', 'address': '上海市普陀区棕榈路' },
          { 'value': '纵食', 'address': '元丰天山花园(东门) 双流路267号' },
          { 'value': '钱记', 'address': '上海市长宁区天山西路' },
          { 'value': '壹杯加', 'address': '上海市长宁区通协路' },
          { 'value': '唦哇嘀咖', 'address': '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
          { 'value': '爱茜茜里(西郊百联)', 'address': '长宁区仙霞西路88号1305室' },
          { 'value': '爱茜茜里(近铁广场)', 'address': '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
          { 'value': '鲜果榨汁（金沙江路和美广店）', 'address': '普陀区金沙江路2239号金沙和美广场B1-10-6' },
          { 'value': '开心丽果（缤谷店）', 'address': '上海市长宁区威宁路天山路341号' },
          { 'value': '超级鸡车（丰庄路店）', 'address': '上海市嘉定区丰庄路240号' },
          { 'value': '妙生活果园（北新泾店）', 'address': '长宁区新渔路144号' },
          { 'value': '香宜度麻辣香锅', 'address': '长宁区淞虹路148号' },
          { 'value': '凡仔汉堡（老真北路店）', 'address': '上海市普陀区老真北路160号' },
          { 'value': '港式小铺', 'address': '上海市长宁区金钟路968号15楼15-105室' },
          { 'value': '蜀香源麻辣香锅（剑河路店）', 'address': '剑河路443-1' },
          { 'value': '北京饺子馆', 'address': '长宁区北新泾街道天山西路490-1号' },
          { 'value': '饭典*新简餐（凌空SOHO店）', 'address': '上海市长宁区金钟路968号9号楼地下一层9-83室' },
          { 'value': '焦耳·川式快餐（金钟路店）', 'address': '上海市金钟路633号地下一层甲部' },
          { 'value': '动力鸡车', 'address': '长宁区仙霞西路299弄3号101B' },
          { 'value': '浏阳蒸菜', 'address': '天山西路430号' },
          { 'value': '四海游龙（天山西路店）', 'address': '上海市长宁区天山西路' },
          { 'value': '樱花食堂（凌空店）', 'address': '上海市长宁区金钟路968号15楼15-105室' },
          { 'value': '壹分米客家传统调制米粉(天山店)', 'address': '天山西路428号' },
          { 'value': '福荣祥烧腊（平溪路店）', 'address': '上海市长宁区协和路福泉路255弄57-73号' },
          { 'value': '速记黄焖鸡米饭', 'address': '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
          { 'value': '红辣椒麻辣烫', 'address': '上海市长宁区天山西路492号' },
          { 'value': '(小杨生煎)西郊百联餐厅', 'address': '长宁区仙霞西路88号百联2楼' },
          { 'value': '阳阳麻辣烫', 'address': '天山西路389号' },
          { 'value': '南拳妈妈龙虾盖浇饭', 'address': '普陀区金沙江路1699号鑫乐惠美食广场A13' }
        ]
      },
      handleSelect(item) {
        console.log(item)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    },
    mounted() {
      this.restaurants = this.loadAll()
      const that = this
      getList().then(response => {
        if (response.data.success) {
          console.log('data', response.data.data)
          that.tableList = response.data.data
        }
      })
    }
  }
</script>

<style type="text/css" scoped="">
  .by-order-card{
    display: flex;
    flex-flow:column;
    flex:1;
    height: 100%;
    border: 1px solid #ebeef5;
    box-sizing: border-box;
    padding:4px;
    margin:4px 0;
  }
</style>
